<template>
	<view class="contain">
		<!-- 盘点单选择器 -->
		<zy-group :title="$t('homepage.Machine.inventorySheet')">
			<view class="picker-input" @click="openPicker">
				<u-input v-model="picker" type="input"
					:placeholder="$t('public.pleaseSelect')+$t('homepage.Machine.inventorySheet')" clearable
					disabledColor="#ffffff" disabled>
					<template slot="suffix">
						<u-icon name="arrow-down"></u-icon>
					</template>
				</u-input>
			</view><!-- 盘点单弹出层 -->
			<u-popup :show="pickerShow" mode="center" :round="10" :closeable="true" @close="close" zIndex="999999">
				<view class="pickerTable">
					<zyTable :scrollHeight="52" :headList="pickerColumn" :dataList="pickerData" @lineClick="lineClick"
						:paginationShow="true" @paginationChange="paginationChange" :pageTotal="pageTotal"
						:pageSize="pageSize">
					</zyTable>
				</view>
			</u-popup>
		</zy-group>
		<view v-if="show">
			<!-- 车间 -->
			<zy-group :title="$t('homepage.Machine.deptName')">
				<span>{{deptName}}</span>
			</zy-group>
			<!-- 设备扫描搜索框 -->
			<zy-group :title="$t('homepage.Machine.machineScan')">
				<search :placeholder="$t('homepage.Machine.machineCode')" type="easy"></search>
			</zy-group>
			<!-- 已选列表 -->
			<zy-group :title="$t('homepage.Machine.selected')+$t('homepage.Machine.machineCode')" v-if="selectedList">
				<zy-table :headList="selectedColumn" :dataList="machineStr"></zy-table>
			</zy-group>
			<!-- 搜索结果列表 -->
			<zy-group :title="$t('homepage.Machine.list')" v-if="selectedList">
				<zy-table :headList="column" :dataList="contents"></zy-table>
			</zy-group>
		</view>
		<!-- 底部按钮 -->
		<bottomBtn fixed :leftText="$t('public.reset')" :rightText="$t('public.submit')" @rightBtn="submitBtn"
			@leftBtn="resetBtn">
		</bottomBtn>
		<!-- 弹出层 -->
		<zy-popup ref="popup" :title="$t('homepage.Machine.InventoryManage')" type="dialog" @confirm="confirm">
			<text style="margin: 20rpx 0;">{{$t('homepage.Machine.isSureSubmit')}}</text>
		</zy-popup>
	</view>
</template>

<script>
	import {
		machineInventory,
		machineInventoryId,
		updateMachineInventory
	} from "@/api/homepage.js"
	import fuiPagination from "@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue"
	export default {
		components: {
			fuiPagination
		},
		data() {
			return {
				picker: "",
				pickerShow: false,
				pickerColumn: [{
						key: 'billNo',
						name: this.$t('homepage.Machine.inventorySheet')
					},
					{
						key: 'deptName',
						name: this.$t('homepage.Machine.deptName')
					}
				],
				pickerData: [],
				pageNum: "1",
				pageTotal: "",
				pageSize: 8,
				deptName: "",
				show: false,
				code: '',
				selectedList: false,
				selectedColumn: [{
						key: 'admissionTime',
						name: this.$t('homepage.Machine.admissionTime')
					},
					{
						key: 'code',
						name: this.$t('public.code')
					},
					{
						key: 'deptName',
						name: this.$t('public.departMent')
					},
					{
						key: 'name',
						name: this.$t('public.name')
					},
				],
				column: [{
						key: 'admissionTime',
						name: this.$t('homepage.Machine.admissionTime')
					},
					{
						key: 'code',
						name: this.$t('public.code')
					},
					{
						key: 'deptName',
						name: this.$t('public.departMent')
					},
					{
						key: 'name',
						name: this.$t('public.name')
					},
				],
				contents: [],
				content: [],
				machineInventoryId: "", //盘点单id
				machineStr: [], //机器明细记录对象数组
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/Machine/InventoryManage/count"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//分页事件
			paginationChange(e) {
				this.pageNum = e.value.current
				this.openPicker()
			},
			openPicker() {
				machineInventory({
					page: this.pageNum,
					limit: this.pageSize,
					deptName: ""
				}).then((res) => {
					this.pickerShow = true
					this.pageTotal = res.count
					this.pickerData = res.data
				})
			},
			//盘点单弹框关闭
			close() {
				this.pickerShow = false
			},
			//盘点单击行选择事件
			lineClick(e) {
				console.log(e)
				this.machineInventoryId = e.item.id
				this.pickerShow = false
				//确认返回未盘点数数据
				machineInventoryId({
					machineInventoryId: this.machineInventoryId
				}).then((res) => {
					if (res.code == 0) {
						this.picker = e.item.billNo
						this.deptName = e.item.deptName
						this.show = true
						this.contents = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			//设备扫描二维码查询
			scanCode(val) {
				this.code = val.value
				this.searchList()
			},
			//设备扫描搜索查询
			search(val) {
				let that = this
				that.code = val.value
				that.searchList()
			},
			searchList() {
				for (var j = 0; j < this.contents.length; j++) {
					if (this.contents.findIndex(item => item.code === this.code) !== -1) {
						if (this.contents[j].code == this.code) {
							if (this.machineStr.length == 0) {
								this.selectedList = true
								this.machineStr.push(this.contents[j])
							} else {
								if (this.machineStr.findIndex(item => item.code === this.code) !== -1) {
									uni.showToast({
										title: this.$t('homepage.Machine.machineSelected'),
										icon: "none",
										duration: 3000
									})
								} else {
									this.machineStr.push(this.contents[j])
								}
							}
						}
					} else {
						uni.showToast({
							title: this.$t('homepage.Machine.noMachineCode'),
							duration: 10000,
							icon: 'none'
						});
					}
				}
			},
			//提交
			submitBtn() {
				this.$refs.popup.open()
			},
			//确认提交
			confirm() {
				updateMachineInventory({
					machineInventoryId: this.machineInventoryId, //盘点单id
					machineStr: JSON.stringify(this.machineStr), //机器明细记录对象数组
				}).then((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
					if (res.code == 0) {
						this.resetBtn()
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			//页面重置刷新
			resetBtn() {
				uni.redirectTo({
					url: "/pages/HomePage/Machine/InventoryManage/count"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		margin: 5px 0;
	}

	.container {
		background-color: #FFFFFF;
		height: 95px;
		width: 100%;
		border-bottom: 1px solid #F6F7FB;
	}

	.title {
		padding: 10px 10px 0 10px;

		.text {
			color: #ffaa00;
			border-left: 5px solid #ffaa00;
			padding-left: 5px;
		}
	}

	.picker-input {
		width: 90%;
		margin: 10px auto 0 auto;
	}

	.pickerTable {
		height: 65vh;
		padding: 40px 20px 20px 20px;
		justify-content: center;
	}

	.count-content {
		margin: 15px 20px;

		span {
			color: #4d4d4d;
			background-color: #efefef;
			border-radius: 4px;
			padding: 5px 10px;
		}
	}

	.overview-datas {
		display: flex;
		text-align: center;
		font-size: 14px;
		width: 100%;

		.overview-data {
			width: 33.3%;
			margin: 10px 0;
		}

		.sub {
			font-weight: 800;
			letter-spacing: 1px;
			margin-bottom: 5px;
		}

		.num {
			font-size: 16px;
			text-align: center;
			color: #ccc;
		}

		.label {
			padding: 5px;
			color: red;
		}
	}

	.operationSets {
		width: 100%;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F6F7FB;

		.operationSet-table {
			margin: 10px 0;
		}
	}

	.operationSet {
		width: 100%;
		margin-bottom: 50px;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F6F7FB;

		.operationSet-table {
			margin: 10px 0;
		}
	}
</style>